<template>
  <div class="mod-config-s">
    <el-table
      :data="dataList"
      @sort-change='sort_change'
      class="table-lod"
      @select="haeldSelect"
      @select-all="haeldSelectAll"
      ref="table"
      :header-cell-style="{background:'#F5F7FA'}"
      :max-height="tableHeight"
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;">
      <el-table-column
        type="selection"
        v-if="selectionTrue"
        width="50">
      </el-table-column>
      <el-table-column
        prop="certificateType"
        min-width="70"
        sortable='custom'
        align="center"
        label="类型">
        <template slot-scope="scope">
          <span v-if="scope.row.certificateType === 1">
            <el-tooltip placement="top">在职员工</el-tooltip>
            在职员工
          </span>
          <span v-else-if="scope.row.certificateType === 2">
            <el-tooltip placement="top">挂靠</el-tooltip>
            挂靠
          </span>
          <span v-else>
            <el-tooltip placement="top">非在职员工</el-tooltip>
            非在职员工
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        v-if="!crashTye"
        min-width="70"
        align="center"
        sortable='custom'
        label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.status === 3">
            <i class="font_family icon-tuoyuan1" style="color:#E9D56E;"></i>
            挂入
          </span>
          <span v-if="scope.row.status === 2">
            <i class="font_family icon-tuoyuan1" style="color:#E9D56E;"></i>
            挂还
          </span>
          <span v-if="scope.row.status === 1">
            <i class="font_family icon-tuoyuan1" style="color:#E9D56E;"></i>
            挂出
          </span>
          <span v-else-if="scope.row.status === 21">
            <i class="font_family icon-tuoyuan1" style="color:#E9D56E"></i>
            投标
          </span>
          <span v-else-if="scope.row.status === 22">
            <i class="font_family icon-tuoyuan1" style="color:#6EE976"></i>
            项目
          </span>
          <span v-else-if="scope.row.status === 23">
             <i class="font_family icon-tuoyuan1" style="color:#6EE976"></i>
            中标
          </span>
          <span v-else-if="scope.row.status === 24">
            <i class="font_family icon-tuoyuan1" style="color:#E9D56E"></i>
            其他
          </span>
          <span v-else-if="scope.row.status === 0">
            <i class="font_family icon-tuoyuan1" style="color:#6E92E9"></i>
            空闲
          </span>
          <span v-else-if="scope.row.status === -1">
            禁用
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        min-width="80"
        align="center"
        sortable='custom'
        label="姓名">
      </el-table-column>
      <!-- <el-table-column
        prop="idCard"
        min-width="160"
        sortable='custom'
        label="身份证号">
      </el-table-column> -->
      <el-table-column
        prop="mobile"
        sortable='custom'
        align="center"
        min-width="110"
        label="手机号"
        :formatter="dateFormats">
      </el-table-column>
      <el-table-column
        prop="idType"
        sortable='custom'
        min-width="120"
        align="center"
        label="证书类型">
      </el-table-column>
      <el-table-column
        prop="profession"
        min-width="170"
        sortable='custom'
        align="center"
        label="证书专业">
      </el-table-column>
      <el-table-column
        prop="certificateNo"
        align="center"
        min-width="170"
        sortable='custom'
        label="证书编号"
        :formatter="dateFormats">
      </el-table-column>
      <el-table-column
        prop="validityEndTime"
        align="center"
        min-width="120"
        sortable='custom'
        label="到期日期"
        :formatter="dateFormats">
      </el-table-column>
      <el-table-column
        prop="warningCount"
        align="center"
        min-width="130"
        sortable='custom'
        label="证书预警"
       >
       <template slot-scope="scope">
         <span v-if="scope.row.warningCount == null">
            -
          </span>
          <span v-else-if="scope.row.warningCount < 0">
            <span class="font_family icon-tuoyuan1" style="color:#E96E6E"></span>已逾期
          </span>
          <span v-else-if="scope.row.warningCount > 90">
          <span class="font_family icon-tuoyuan1" style="color:#6EE976"></span>未到期
          </span>
          <span v-else>
          <span class="font_family icon-tuoyuan1" style="color:#E9D56E"></span>还有{{scope.row.warningCount}}天到期
          </span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="crashTye"
        align="center"
        prop="enableRemark"
        min-width="120"
        :show-overflow-tooltip="true"
        sortable='custom'
        label="作废说明"
        :formatter="dateFormat">
      </el-table-column>
      <el-table-column
        min-width="80"
        align="center"
        label="操作">
        <template slot-scope="scope">
          <el-button style="color:#6E92E9;" type="text" v-if="isAuth('certificate:certificateInfo:info')" size="mini" @click="addOrUpdateHandle(scope.row)">查看</el-button>
          <span style="color:#E8E8E8;">|</span>
          <el-button v-if="crashTye" class="button-s" style="color:#E96E6E;" type="text" size="mini" @click="getRestoreDialogVisible(scope.row)">还原</el-button>
          <el-button v-if="!crashTye && isAuth('certificate:certificateInfo:delete')" class="button-s" style="color:#E96E6E;" type="text" size="mini" @click="cancellation(scope.row)">作废</el-button>
          <span v-if="crashTye" style="color:#E8E8E8;">|</span>
          <el-button v-if="crashTye" class="button-s" style="color:#E96E6E;" type="text" size="mini" @click="clickDelete(scope.row)">彻底删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[5, 10, 20, 50, 100, 200]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, prev, pager, next, sizes, jumper">
    </el-pagination>
    <!-- 作废 -->
  <el-dialog
  title="提示"
  :visible.sync="cancellationDialogVisible"
  width="30%"
  class="dialog-can"
  >
  <span>
    <div class="cancellationIcon">

    <i class="el-icon-warning icon-can"></i><p class="zuofei">证书作废后</p><p class="bured">不可恢复</p><p class="zuofei">，是否作废？如确认作废，请填写情况说明。</p>
    </div>
    <el-form :model="disoadForm" :rules="disoadFormProp" ref="disoadForm" label-width="90px" class="demo-ruleForm">
      <el-form-item label="姓名：">
        <span style="color:red">{{cancellationName}}</span>
     </el-form-item>
     <el-form-item label="证书编号：">
       <span style="color:red">{{cancellationNo}}</span>
  </el-form-item>
      <el-form-item label="说明：" prop="enableRemark">
    <el-input type="textarea" :rows="3" placeholder="请输入情况说明" v-model="disoadForm.enableRemark"></el-input>
  </el-form-item>
    </el-form>
  </span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="cancellationDialogVisible = false">取 消</el-button>
    <el-button type="danger" @click="deleteHandle()">确 定</el-button>
  </span>
</el-dialog>
<!-- 还原 -->
  <el-dialog
  title="提示"
  :visible.sync="restoreDialogVisible"
  width="30%"
  class="dialog-can"
  >
  <span>
    <div class="cancellationIcon">

    <i class="el-icon-warning icon-can"></i><p class="zuofei">证书还原操作！</p><p class="zuofei">是否还原此条信息？如确认还原，再进行操作。</p>
    </div>
    <el-form label-width="90px" class="demo-ruleForm">
      <el-form-item label="姓名：">
        <span style="color:red">{{restoreName}}</span>
     </el-form-item>
     <el-form-item label="证书编号：">
       <span style="color:red">{{restoreNo}}</span>
  </el-form-item>
    </el-form>
  </span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="restoreDialogVisible = false">取 消</el-button>
    <el-button type="danger" @click="recoverHandle()">确 定</el-button>
  </span>
</el-dialog>
<!-- 挂还 -->
    <el-dialog v-dialogDrag title="证书挂还" width="60%" :visible.sync="clickGuiVisible">
      <el-form :model="bringGuiForm" ref="bringGuiForm" :rules="bringGuiRule" label-width="100px">
        <el-row>
          <el-col class="shouhuishijian" :span="12">
            <el-form-item label="挂还日期：" prop="transactionTime">
              <el-date-picker type="date" v-model="bringGuiForm.transactionTime" placeholder="请选择归还日期：" style="width:100%"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
              <el-form-item label="备注：" prop="remark">
                <el-input type="textarea" :rows="6" v-model="bringGuiForm.remark" placeholder="请填写情况说明"></el-input>
              </el-form-item>
            </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="button-see" size="mini" plain @click="clickGuiVisible = false">取 消</el-button>
        <el-button class="button-see" size="mini" type="primary" @click="clickSubmit()">挂 还</el-button>
      </div>
    </el-dialog>


    <!-- 还回 -->
    <el-dialog v-dialogDrag title="证书还回" width="60%" :visible.sync="clickGuiVisibleA">
      <el-form :model="bringGuiFormA" ref="numberForm" :rules="numberRule" label-width="100px">
        <el-row>
          <el-col class="shouhuishijian" :span="12">
            <el-form-item label="还回日期：" prop="transactionTime">
              <el-date-picker type="date" v-model="bringGuiFormA.transactionTime" placeholder="请选择还回日期：" style="width:100%"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
              <el-form-item label="备注：" prop="remark">
                <el-input type="textarea" :rows="6" v-model="bringGuiFormA.remark" placeholder="请填写情况说明"></el-input>
              </el-form-item>
            </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="button-see" size="mini" plain @click="clickGuiVisibleA = false">取 消</el-button>
        <el-button class="button-see" size="mini" type="primary" @click="clickSubmitA()">还 回</el-button>
      </div>
    </el-dialog>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" :flag="flag"></add-or-update>
  </div>

</template>

<script>
  // import
  import HappyScroll from 'vue-happy-scroll'
  import 'vue-happy-scroll/docs/happy-scroll.css'
  import merge from 'lodash/merge'
  import AddOrUpdate from './certificate-info'
 // import CertificateDetail from './certificate-list-detail'
  import {deleteCertificate} from '../../../../api/certificate/certificateType'
export default {
    props: {
      flag: {
        type: Boolean,
        default: false
      },
      params: {
        type: Object
      },
      crashTye: {
        type: Boolean
      },
      eddop: {
        type: Boolean
      },
      selectionTrue: {
        type: Boolean
      },
      activeId: {
        type: Number
      }
    },
    data () {
      return {
        dataForm: {
          key: ''
        },
        numberForm: {
          transactionTime: '',
          remark: ''
        },
        bringGuiForm: {
          transactionTime: '',
          remark: ''
        },
        bringGuiFormA: {
          transactionTime: '',
          remark: ''
        },
        bringGuiRule: {
          transactionTime: [
        { required: true, message: '请选择归还时间', trigger: 'blur' }
          ],
          remark: [
        { required: true, message: '请填写情况说明', trigger: 'blur' }
          ]
        },
        numberRule: {
          transactionTime: [
        { required: true, message: '请选择归还时间', trigger: 'blur' }
          ],
          remark: [
        { required: true, message: '请填写情况说明', trigger: 'blur' }
          ]
        },
        tableHeight: 0,
        dataList: [],
        selectionData: [],
        selectionId: [],
        selectionIdA: [],
        selectionIdData: [],
        selectionIdDataA: [],

        clickGuiVisible: false,
        clickGuiVisibleA: false,

        restoreDialogVisible: false,
        restoreId: '',
        restoreName: '',
        restoreNo: '',

        selectionDatale: null,
        pageIndex: 1,
        pageSize: 20,
        totalPage: 0,
        heightis: 310,
        cancellationName: '',
        cancellationNo: '',
        // certificateListVisible: true,
        cancellationDialogVisible: false,
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false,
        type: '',
        tenantId: '',
        isPics: true,
        count: 0,
        prop: '',
        inOrder: '',
        orderBy: '',
        cancellationid: '',
        disoadFormProp: {
          enableRemark: [
            { required: true, message: '请填写情况说明', trigger: 'blur' }
          ]
        },
        disoadForm: {
          enableRemark: ''
        }
      }
    },
    mounted () {
        // this.$nextTick(() => {
        //     this.tableHeight = window.innerHeight - this.heightis;
        //     //后面的50：根据需求空出的高度，自行调整
        // })
    },
    components: {
      AddOrUpdate, HappyScroll
      // CertificateDetail
    },
    created () {
      if (!this.tenantId) {
        this.$nextTick(() => {
          this.tenantId = this.activeId
          this.getDataList()
        })
      } else {
        this.getDataList()
      }

      this.tackHeight()
      // this.selectionData()
    },
    methods: {
      haeldSelect (selection, row) {
        this.selectionData = selection
        this.selectionDatale = this.selectionData.length
        this.$emit('onChange', this.selectionDatale)
      },
      haeldSelectAll (selection) {
        this.selectionData = selection
        this.selectionDatale = this.selectionData.length
        this.$emit('onChange', this.selectionDatale)
        console.log(this.selectionData)
      },
      traversalData () {
        this.clickGuiVisible = true
        this.selectionId = this.selectionData.map(val => val.id)
      },
      traversalDataeA () {
        this.clickGuiVisibleA = true
        this.selectionId = this.selectionData.map(val => val.id)
      },
      clickSubmit () {
        if (this.selectionId.length === 0) {
          this.$message.error('请先选择需要操作的证书')
          return
        }

        this.selectionId.forEach((a) => {
          this.selectionIdData.push({certificateId: a})
        })
        this.selectionIdData.forEach(item => {
          this.$set(item, 'transactionTime', this.$dateFormat(this.bringGuiForm.transactionTime))
        })
        this.selectionIdData.forEach(item => {
          this.$set(item, 'remark', this.bringGuiForm.remark)
        })
        console.log(this.selectionIdData)
    //
        this.$refs.bringGuiForm.validate(valid => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl('/certificate/certiTransactionInfo/batchReturnSave'),
              method: 'post',
              data: this.selectionIdData
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.getDataList()
                    this.clickGuiVisible = false
                    this.selectionData = []
                    this.selectionDatale = []
                    if (!this.crashTye) {
                      this.$emit('falseClickClick')
                    }
                  // this.selectionTrue = false
                  // this.tackHeight()
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      },
      clickSubmitA () {
        if (this.selectionId.length === 0) {
          this.$message.error('请先选择需要操作的证书')
          return
        }
      //
        this.$refs.numberForm.validate(valid => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl('/certificate/certificateInfo/borrowOut/return/batch'),
              method: 'post',
              data: this.$http.adornData({
                'ids': this.selectionId,
                'remark': this.bringGuiFormA.remark,
                'transactionTime': this.$dateFormat(this.bringGuiFormA.transactionTime)
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.getDataList()
                    this.clickGuiVisibleA = false
                    this.bringGuiFormA.remark = ''
                    this.bringGuiFormA.transactionTime = ''
                    this.selectionData = []
                    this.selectionDatale = []

                    if (!this.crashTye) {
                      this.$emit('falseClickClick')
                    }
                  // this.selectionTrue = false
                  // this.tackHeight()
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      },
      unfoldHeight () {
        if (this.selectionTrue) {
          this.heightis = 516
        } else {
          this.heightis = 464
        }
        this.adjustTableHeight()
        console.log(this.heightis)
      },
      tackHeight () {
        if (this.crashTye) {
          this.heightis = 281
          this.adjustTableHeight()
      // console.log('s5s55sfe');
        }
        if (!this.crashTye) {
          this.heightis = 305
          this.adjustTableHeight()
        }
        if (this.selectionTrue && !this.crashTye) {
          this.heightis = 357
          this.adjustTableHeight()
        }
      },
      halgTackHeight () {
        this.heightis = 357
        this.adjustTableHeight()
      },
      halgTackHeightguan () {
        this.heightis = 305
        this.adjustTableHeight()
      },
      adjustTableHeight () {
        this.$nextTick(() => {
          this.tableHeight = window.innerHeight - this.heightis
          // 后面的50：根据需求空出的高度，自行调整
        })
      },
      // 作废前
      cancellation (row) {
        this.cancellationDialogVisible = true
        this.cancellationid = row.id
        this.cancellationName = row.name
        this.cancellationNo = row.certificateNo

      // console.log(this.cancellationid);
      },
      // 作废
      deleteHandle () {
        // var ids = this.cancellationid ? [this.cancellationid] : this.dataListSelections.map(item => {
        //   return item.id
        // })
        console.log(this.cancellationid)
        this.$refs.disoadForm.validate(valid => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl('/certificate/certificateInfo/delete'),
              method: 'post',
              params: this.$http.adornParams({
                'id': this.cancellationid,
                'enableRemark': this.disoadForm.enableRemark
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.getDataList()
                    this.cancellationDialogVisible = false
                    this.disoadForm.enableRemark = ''
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      },
      sort_change (column) {
        this.orderBy = column.prop
        if (column.order === 'ascending') {
          this.inOrder = 'asc'
        }
        if (column.order === 'descending') {
          this.inOrder = 'desc'
        }
        this.getDataList()
      },
      getNopicCert () {
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/getCertificateWithoutPic/' + this.pageIndex + '/' + this.pageSize + '/' + this.type),
          method: 'post'
        }).then(({data}) => {
        // console.log(res.data.data.list)
        // console.log(data)
          this.dataList = data.data.list
          this.totalPage = data.data.totalCount
        })
      },
      certificateTypeFormat (row, column, val, n) {
        if (val === 2) {
          return '兼职'
        } else {
          return '在职员工'
        }
      },
      statusFormat (row, column, val, n) {
        let label = ''
        if (val === 2) {
          label = '借出'
        } else if (val === 31) {
          label = '投标中'
        } else if (val === 32) {
          label = '项目中'
        } else {
          return "<span style='color:#fc8e2d;'>空闲</span>"
        }
        return "<span style='color:#f56c6c;'>" + label + '</span>'
      },
      dateFormats (row, column, cellValue, index) {
        if (!cellValue) {
          return '-'
        } else {
          return cellValue
        }
      },
      dateFormat (row, column, cellValue, index) {
        // if (!Boolean(cellValue)) {
        //         return "--";
        //     } else {
        //         return cellValue;
        //     }
        return cellValue ? cellValue.substring(0, 10) : ''
      },
      init (type, tenantId) {
        this.type = type || ''
        this.tenantId = tenantId
        this.getDataList()
      },
      getDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/list'),
          method: 'get',
          params: this.$http.adornParams(merge(this.params, {
            'page': this.pageIndex,
            'limit': this.pageSize,
            'type': this.type === 'all' ? '' : this.type,
            'status': this.flag ? 'crash' : this.params.status,
            'tenantId': this.tenantId,
            'orderBy': this.orderBy,
            'inOrder': this.inOrder
          }))
        }).then(({data}) => {
          if (data && data.code === 0) {
            // console.log(data)
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      getDataListList () {
        this.dataListLoading = true
        if (this.params.pidTypes === 'all') {
          this.params.pidTypes = ''
        }
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/list'),
          method: 'get',
          // merge(this.params,
          params: this.$http.adornParams({
            'name': this.params.name,
            'certificateType': this.params.certificateType,
            // 'status': this.params.status,
            'idCard': this.params.idCard,
            'mobile': this.params.mobile,
            'academic': this.params.academic,
            'pIdType': this.params.pidTypes,
            'idType': this.params.idType,
            'registerType': this.params.registerType,
            'profession': this.params.profession,
            'certificateNo': this.params.certificateNo,
            'keepDeptId': this.params.keepDeptId,
            'projectName': this.params.projectName,
            'releaseTime': this.$dateFormat(this.params.releaseTime),
            'validityEndTime': this.$dateFormat(this.params.validityEndTime),
            'page': 1,
            'warrantFlag': this.params.warrantFlag,
            'limit': this.pageSize,
            // 'type': this.type === 'all' ? '' : this.type,
            'status': this.flag ? 'crash' : this.params.status,
            'tenantId': this.tenantId
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            // console.log(data)
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        if (this.isPics) {
          this.getDataList()
        } else {
          this.getNopicCert()
        }
      },
      currentChangeHandle (val) {
        this.pageIndex = val
        if (this.isPics) {
          this.getDataList()
        } else {
          this.getNopicCert()
        }
      },
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      addOrUpdateHandle (row) {
        this.$emit('clickCertificateListVisible', row)
      },
      // 还原前
      getRestoreDialogVisible (row) {
        this.restoreDialogVisible = true
        this.restoreId = row.id
        this.restoreName = row.name
        this.restoreNo = row.certificateNo
      },
      recoverHandle (row) {
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/recover/' + this.restoreId),
          method: 'post'
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getDataList()
                this.restoreDialogVisible = false
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      },
      clickDelete (row) {
        this.$confirm(`确定删除姓名为${row.name}的记录吗？`, '删除', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteCertificate(row.id,
            () => {
              this.$message.success('删除成功!')
              this.getDataList()
            })
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
// .detect{
//     height: 100%;
//     overflow: hidden !important;
//     overflow-y: auto !important;
  // height: 1000px;
  // width: 100px;
// }
// .mod-config{
//   height: 100%;
//   overflow: hidden;
//   overflow-y: auto;
// }
// .table-lod{
//   height: 100%;
// }
  .demo-ruleForm{
    margin-top: 20px;
  }
/deep/.button-s{
  margin-left: 0px !important;
  }
/deep/.el-table__row{
  .is-center{
    .cell{
      span{
        i{
          font-size: 13px !important;
        }
      }
    }
  }
}
.cancellationIcon{
    display: flex;
    justify-content: center;
    align-items: center;
    .zuofei{
      font-size: 14px;
      color: #303133;
    }
   .bured{
     font-size: 14px;
     color: #F56C6C;
   }
  }
  .iconPro {
    width: 1.5em;
    height: 1.5em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
  .font_family{
    font-size: 15px !important;
    // margin-top: 2px;
  }
  /deep/.kongxian{
    font-size: 13px !important;
    color: #6E92E9;
  }
  .btnFalses{
    background: #F06153 !important;
    border: #F06153 !important;
  }
  .el-message-box__btns {
    margin-bottom: 10px;
    margin-top: 15px;
  }
  .el-message-box__title {
    margin-top: 10px;
    margin-bottom: 15px;
  }
  .el-pagination.is-background .el-pager li:not(.disabled).active{
    background-color: #FFFFFF !important;
    color: #409EFF !important;
  }
  .icon-can{
    font-size: 22px;
    color: #F56C6C;
    margin-right: 10px;
  }
</style>
